<template>
	<view>
		<view class="header">
			<view v-if="order_status_id == 3">
				<uni-countdown background-color="#00C657" color="#FFF" splitorColor="#FFF"
					:showDay="false" :minute="minute" :second="second">
				</uni-countdown>
				<text style="color:#FFFFFF;">请尽快付款，超时将被自动取消</text>
			</view>
			<view v-else-if="order_status_id == 5">
				<uni-icons type="info" color="white" size="20"></uni-icons>
				<text style="color: #FFFFFF;font-size: 34rpx;">交易取消</text>
			</view>
			<view v-else="order_status_id == 1">
				<text style="color: #FFFFFF;font-size: 34rpx;">已成功下单</text>
			</view>
		</view>
		<view class="order">
			<view class="it1">{{goods_count}}件商品</view>
			<block v-for="(item, index) in orderList" :key="index">				
				<view>
					<view class="line"></view>
					<view class="it2" style="display: flex;flex-direction: row;">
						<image :src="item.goods_images" style="width: 100rpx;height: 100rpx;"></image>
						<view style="display: flex;flex-direction: column;margin-left: 20rpx;">
							<text style="font-size: 24rpx;">{{item.name}}</text>
							<text style="font-size: 20rpx;color: #999;">￥{{item.price}} x{{item.quantity}}</text>
							<text style="font-size: 24rpx;line-height: 2;">小计：{{item.total}}</text>
						</view>
					</view>
					<view style="margin-left: 20rpx;color: #999;margin-top: 20rpx;">发起投诉</view>
				</view>
			</block>
		</view>
		<view class="order-info">
			<view class="it1">订单信息</view>
			<view class="line"></view>
			<view class="item">
				<text style="color: #999999;">订单编号</text>
				<text>{{order_num_alias}}</text>
			</view>
			<view class="item">
				<text style="color: #999999;">下单时间</text>
				<text>{{date_added}}</text>
			</view>
			<view class="item">
				<text style="color: #999999;">商品金额</text>
				<text>+{{total_price}}</text>
			</view>
			<view class="line"></view>
		    <view class="item">合计：<text style="color: red;">￥{{total_price}}</text></view>
		</view>
		<view class="footer" v-if="order_status_id === 3">
			<button type="button" style="background: #FFFFFF;color: #999999;" @click="cancleOrder">取消订单</button>
			<button type="button" style="background: #00C657;color: #FFFFFF;" @click="toPay">立即付款</button>
		</view>
		<!-- <view class="footer" v-else="order_status_id === 5">
		</view> -->
	</view>
</template>
<script>
	import {
		Storage
	} from '@/static/libs/utils.js'
	//import { reallyBuy } from '@/utils/index.js'
export default {
	data(){
		return {
			minute:59,
			second:59,
			order_id:0, 
			comment:'',
			orderList:[],
			order_num_alias:'',
			date_added:'',
			total_price:'',
			goods_count:0,
			order_status_id:3
		}
	},
	onLoad(e){
		this.order_id = e.order_id;
		console.log('商品id',this.order_id)
		this.comment = e.comment
	    console.log('jiami',this.comment)
		this.getOrderDetail()
	},
	methods:{
		//获取订单详情
		getOrderDetail(){
			this.token = Storage.get('token')
			var longitude = Storage.get('longitude')
			var latitude = Storage.get('latitude')
			this.$request.get("/wxapp.php?from=wxapp&c=entry&a=wxapp&do=index&&m=lionfish_comshop",
			{
			  controller:'order.order_info',
			  token:this.token,
			  id:this.order_id,
			  latitude:latitude,
			  longitude:longitude,
			  }).then(res=>{
				console.log('订单详情',res)
				var order_status_id = ''
				this.order_status_id = res.data.data.order_status_info.order_status_id
				console.log('状态ididid',this.order_status_id)
				console.log('添加的商品',res.data.data.order_goods_list[0])
				this.goods_count = res.data.data.goods_count
				this.orderList = res.data.data.order_goods_list
				this.order_num_alias = res.data.data.order_info.order_num_alias //订单编号
				this.date_added = res.data.data.order_info.date_added //下单时间
				this.total_price = res.data.data.order_info.total //总金额
			})
		},
		//取消订单
		cancleOrder(){
			this.token = Storage.get('token')
			this.$request.post("/wxapp.php?from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop",
			{
			   controller:'order.cancel_order',
			   token:this.token,
			   order_id:this.order_id
			}).then(res=>{
				console.log('取消订单',res)
				uni.showModal({
					title:'提示',
					content:'确定取消订单?',
					success: (res)=>{
						if(res.confirm){
							uni.switchTab({
								url:'../dingdan/dingdan'
							})
						}else if(res.cancel){
							
						}						
					}
				})
			})
		},
		//立即付款-再次发起微信支付
		toPay(){
		  console.log('111')
		  this.token = Storage.get('token')
		  this.$request.get("/wxapp.php?from=wxapp&c=entry&a=wxapp&do=index&&m=lionfish_comshop", {
		  	controller: 'car.wxpay',
		  	token: this.token,
		    order_id:this.order_id
		  }).then(res => {
			  console.log('立即付款',res)
		  	var obj = res.data;
		  	 res.data.order_id
		  	 //reallyBuy(obj,res.data.order_id,0);
			 uni.requestPayment({
			 	provider:'wxpay',
				timeStamp:res.data.timeStamp,
				nonceStr:res.data.nonceStr,
				package:res.data.package,
				signType:res.data.signType,
				paySign:res.data.paySign,
				success:function(res){
					console.log('success:'+JSON.stringify(res))
				},
				fail:function(err){
					console.log('fail:'+JSON.stringify(err))
				}
			 })
		  })
		}
	}
}
</script>
<style lang="scss">
	page {
		background-color: rgb(245, 245, 245);
		height: 100%;
	}
.header {
	width: 100%;
	height: 300rpx;
	border-radius: 0 0 25rpx 25rpx;
	background-color: #00C657;
    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.order {
	width: 700rpx;
	background-color: #FFFFFF;
	margin-left: 25rpx;
	border-radius: 20rpx;
	transform: translateY(-50rpx);//向上平移50rpx
	padding-bottom: 30rpx;
	.it2 {
		margin-left: 30rpx;
	}
}
.it1 {
	margin-left: 30rpx;
	padding-top: 30rpx;
	color: #999;
}
.line {
	width: 100%;
	height: 1rpx;
	background-color: #E5E5E5;
	margin: 20rpx 0rpx;
}
.order-info {
	width: 700rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	margin: 30rpx 25rpx 20%;
	line-height: 60rpx;
	padding-bottom: 30rpx;
	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 640rpx;
		margin-left: 30rpx;
	}
	.total {
		margin-right: 30rpx;
		margin-left: auto;
	}
}
.footer {
	position: fixed;
	width: 100%;
	left: 0rpx;
	bottom: 0rpx;
	display: flex;
	flex-direction: row;
}
.footer button {
	width: 50%;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 0;
}
</style>
